<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.css" rel="stylesheet" />
		<link href='css/index.css' rel='stylesheet' />
		<link href="css/iconfont.css" rel="stylesheet" />
	</head>

	<body>
		<footer class="mui-bar mui-bar-footer">
			<a><span class="mui-icon iconfont icon-iconjia"></span></a>
			<a href="#popover" id="openPopover">
				<span class="mui-icon iconfont icon-sandian"></span>
			</a>
		</footer>
		<div class="mui-content" id='main'>
			
			<div class='mui-backImg'>
				<div class='mui-backImg-title'>
					<h5>{{distrct}} {{street}}</h5>
					<p>{{temperature.value+'℃'}}</p>
					<p>
						<a href='javascript:'>
							<span>{{todayd.wthr}} </span>|
							<span>空气{{quality}}</span>
							<span> {{aqi}}</span>
							<span class='mui-icon mui-icon-arrowright'></span>
						</a>
					</p>
				</div>
				<div class='mui-backImg-detail'>
					<div class='mui-backImg-wind'>
						<p>{{direction.value}}{{direction.unit}}</p>
						<span>{{speed.value}}{{speed.unit}}</span>
					</div>
					<div class='mui-backImg-humidity'>
						<p>相对湿度</p>
						<span>{{humidity.value}}{{humidity.unit}}</span>

					</div>
					<div class='mui-backImg-temprature'>
						<p>体感温度</p>
						<span>{{feelsLike.value+'℃'}}</span>
					</div>
				</div>
			</div>
			<ul class="mui-table-view mui-table-last">
				<li class="mui-table-view-cell">
					<a>
						<span>今天</span>
						<span>{{todayd.wthr}} | {{todayd.wd}}</span>
						<span>{{today.high+'℃'}}/{{today.low+'℃'}}</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a>
						<span>明天</span>
						<span>{{tomorrowd.wthr}} | {{tomorrowd.wd}}</span>
						<span>{{tomorrow.high+'℃'}}/{{tomorrow.low+'℃'}}</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a>
						<span>后天</span>
						<span>{{acquiredd.wthr}} | {{acquiredd.wd}}</span>
						<span>{{acquired.high+'℃'}}/{{acquired.low+'℃'}}</span>
					</a>
				</li>
				<li class='mui-table-view-cell mui-table-last'>
					<a href="javascript:">
						<span>未来15天的趋势</span>
					</a>
				</li>
			</ul>
			<div class='mui-scroll-title'>
				<p>{{desc}}</p>
			</div>
			<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
				<div class="mui-scroll">
					<canvas id='foo' height='400' width='3000' style="width:1500px;height:200px"></canvas>
				</div>
			</div>
			<ul class="mui-table-view mui-table-first">
				<li class='mui-table-view-cell'>
					<a href="javascript:">
						<span>出行建议</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<div class='cell-img cell-clothes'>
							<img v-bind:src='clothesimg'></img>
						</div>
						<div class='cell-jianyi'>
							<p>{{clothes}}</p>
							<p>{{clothesdesc}}</p>
						</div>

					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<div class='cell-img  cell-spf'>
							<img v-bind:src='spfimg'></img>
						</div>
						<div class='cell-jianyi'>
							<p>{{spf}}</p>
							<p>{{spfdesc}}</p>
						</div>
					</a>
				</li>

			</ul>
			<ul class="mui-table-view mui-table-first">
				<li class='mui-table-view-cell'>
					<a href="javascript:">
						<span>旅游建议</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<div class='cell-img  cell-sport'>
							<img v-bind:src='sportimg'></img>
						</div>
						<div class='cell-jianyi'>
							<p>{{sport}}</p>
							<p>{{sportdesc}}</p>
						</div>
					</a>
				</li>
			</ul>
			<ul class="mui-table-view mui-table-first">
				<li class='mui-table-view-cell'>
					<a href="javascript:">
						<span>驾车建议</span>
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						<div class='cell-img cell-drive'>
							<img v-bind:src='driveimg'></img>
						</div>
						<div class='cell-jianyi'>
							<p>{{drive}}</p>
							<p>{{drivedesc}}</p>
						</div>
					</a>
				</li>
			</ul>
			<div class='numberSource'>
				<p>气象数据来自<span class="mui-icon mui-icon-paperplane"></span>小米天气</p>
			</div>
			<div id="popover" class="mui-popover">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell"@click='broadcast'>
						<a href="javascript:" class='mui-popover-speech' >语音播报</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:" class='mui-popover-share'>分享天气</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="javascript:" calss='mui-popover-set'>设置</a>
					</li>
				</ul>
			</div>
		</div>

		<!--<script data-main='js/script/main' src="js/lib/require.js"></script>-->
		<script src="js/lib/mui.js"></script>
		<script src="js/lib/vue.js"></script>
		<script src='js/script/citys.js'></script>
		<script src="js/script/tendays.js"></script>
		<script src="js/script/scroll.js"></script>

	</body>

</html>